import { defineStore } from "pinia";
import router from "../router";
import { useDheader } from "./Dheader";
import _ from "lodash";
export const useDaside = defineStore("useDaside", {
  persist: {
    key: "yyqs-Daside",
    // 修改为 sessionStorage，默认为 localStorage
    storage: sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ["aside"],
  },
  // persist: true,  开启数据持久化，所有store数据将被持久化到指定仓库
  //  persist: { // 自定义数据持久化方式
  //     // key: 'store-key', 指定key进行存储，此时非key的值不会持久化，刷新就会丢失
  //     storage: window.localStorage, // 指定换成地址
  //     // paths: ['nested.data'],// 指定需要持久化的state的路径名称
  //     beforeRestore: context => {
  //         console.log('Before' + context)
  //     },
  //     afterRestore: context => {
  //         console.log('After'+ context)
  //     },
  // },
  state: () => {
    return {
      menu: [
        {
          title: "menu.home",
          to: "/home",
          type: 0,
          icon: "ep:home-filled",
          value: "1",
        },
        {
          title: "menu.editor.default",
          submenu: [
            {
              title: "menu.editor.chart",
              to: "/editor/chart",
              type: 0,
              icon: "ant-design:bar-chart-outlined",
              value: "2-1",
            },
            {
              title: "menu.editor.text",
              to: "/editor/text",
              type: 0,
              icon: "ant-design:file-word-outlined",
              value: "2-2",
            },
            {
              title: "menu.editor.code",
              to: "/editor/code",
              type: 0,
              icon: "ant-design:code-outlined",
              value: "2-3",
            },
            {
              title: "menu.editor.excel",
              to: "/editor/excel",
              type: 0,
              icon: "ant-design:table-outlined",
              value: "2-4",
            },
          ],
          to: "/editor",
          type: 1,
          icon: "ep:edit",
          value: "2",
        },
        {
          title: "menu.component.default",
          submenu: [],
          to: "/component",
          type: 1,
          icon: "carbon:assembly-cluster",
          value: "3",
        },
        {
          title: "menu.tools.default",
          submenu: [
            {
              title: "menu.tools.mailbox",
              to: "/tools/mailbox",
              type: 0,
              icon: "ant-design:mail-outlined",
              value: "4-1",
            },
            {
              title: "menu.tools.format",
              to: "/tools/format",
              type: 0,
              icon: "ant-design:format-painter-outlined",
              value: "4-2",
            },
            {
              title: "menu.tools.schedule",
              to: "/tools/schedule",
              type: 0,
              icon: "carbon:task-settings",
              value: "4-3",
            },
            {
              title: "menu.tools.recognition",
              to: "/tools/recognition",
              type: 0,
              icon: "mdi:text-recognition",
              value: "4-4",
            },
            {
              title: "menu.tools.bookmark",
              to: "/tools/bookmark",
              type: 0,
              icon: "carbon:bookmark",
              value: "4-5",
            },
            {
              title: "menu.tools.bookmark",
              to: "/tools/bookmark",
              type: 0,
              icon: "carbon:bookmark",
              value: "4-6",
            },
            {
              title: "menu.tools.player.default",
              submenu: [
                {
                  title: "menu.tools.player.musicplayer",
                  to: "/tools/player/musicplayer",
                  type: 0,
                  icon: "carbon:music",
                  value: "4-6-1",
                },
                {
                  title: "menu.tools.player.videoplayer",
                  to: "/tools/player/videoplayer",
                  type: 0,
                  icon: "carbon:document-video",
                  value: "4-6-2",
                },
              ],
              to: "/tools/player",
              type: 1,
              icon: "simple-icons:playerfm",
              value: "4-7",
            },
            {
              title: "menu.tools.others",
              to: "/tools/others",
              type: 0,
              icon: "ant-design:node-expand-outlined",
              value: "4-8",
            },
          ],
          to: "/tools",
          type: 1,
          icon: "ep:tools",
          value: "4",
        },
        {
          title: "menu.chat.default",
          submenu: [],
          to: "/chat",
          type: 1,
          icon: "ep:chat-line-square",
          value: "5",
        },
        {
          title: "menu.blog.default",
          submenu: [
            {
              title: "menu.blog.page",
              to: "/blog/page",
              type: 0,
              icon: "carbon:application-web",
              value: "6-1",
            },
            {
              title: "menu.blog.article",
              to: "/blog/article",
              type: 0,
              icon: "carbon:document",
              value: "6-2",
            },
            {
              title: "menu.blog.markdown",
              to: "/blog/markdown",
              type: 0,
              icon: "ant-design:file-markdown-outlined",
              value: "6-3",
            },
          ],
          to: "/blog",
          type: 1,
          icon: "carbon:blog",
          value: "6-4",
        },
        {
          title: "menu.database.default",
          submenu: [
            {
              title: "menu.database.mysql",
              to: "/database/mysql",
              type: 0,
              icon: "simple-icons:mysql",
              value: "7-1",
            },
            {
              title: "menu.database.redis",
              to: "/database/redis",
              type: 0,
              icon: "simple-icons:redis",
              value: "7-1",
            },
            {
              title: "menu.database.mongodb",
              to: "/database/mongodb",
              type: 0,
              icon: "simple-icons:mongodb",
              value: "7-1",
            },
          ],
          to: "/database",
          type: 1,
          icon: "ant-design:database-outlined",
          value: "7",
        },
        {
          title: "menu.data.default",
          submenu: [
            {
              title: "menu.data.collection",
              to: "/data/collection",
              type: 0,
              icon: "carbon:data-collection",
              value: "8-1",
            },
            {
              title: "menu.data.processing",
              to: "/data/processing",
              type: 0,
              icon: "carbon:data-unstructured",
              value: "8-2",
            },
            {
              title: "menu.data.mining",
              to: "/data/mining",
              type: 0,
              icon: "carbon:data-structured",
              value: "8-3",
            },
          ],
          to: "/data",
          type: 1,
          icon: "carbon:data-vis-1",
          value: "8",
        },
        {
          title: "menu.system.default",
          submenu: [
            {
              title: "menu.system.permission",
              to: "/system/permission",
              type: 0,
              icon: "carbon:manage-protection",
              value: "9-1",
            },
            {
              title: "menu.system.user",
              to: "/system/user",
              type: 0,
              icon: "carbon:id-management",
              value: "9-2",
            },
            {
              title: "menu.system.department",
              to: "/system/department",
              type: 0,
              icon: "simple-icons:homeassistantcommunitystore",
              value: "9-3",
            },
            {
              title: "menu.system.dictionary",
              to: "/system/dictionary",
              type: 0,
              icon: "carbon:data-1",
              value: "9-4",
            },
            {
              title: "menu.system.file",
              to: "/system/file",
              type: 0,
              icon: "ant-design:file-search-outlined",
              value: "9-5",
            },
          ],
          to: "/system",
          type: 1,
          icon: "ep:setting",
          value: "9",
        },
        {
          title: "menu.document",
          to: "/document",
          type: 0,
          icon: "ep:mostly-cloudy",
          value: "10",
        },
        {
          title: "menu.log",
          to: "/log",
          type: 0,
          icon: "ep:coin",
          value: "11",
        },
        {
          title: "menu.about",
          to: "/about",
          type: 0,
          icon: "ep:avatar",
          value: "12",
        },
      ] as any[],
      aside: {
        isLoading: false,
        Daside: false,
        isCollapse: false,
        isDasideHide: false,
        isEllipsis: 1,
        isMask: false,

        settings: {
          isSettingsHide: true,
          isSunnyMode: true,
          isGreyMode: false,
          isSmallMenuState: false,
          isSmallMenuDisplay: false,
          isRightSide: true,
          isHover: false,
          isTabIconDisplay: false,
          mode: 1,
          themeColor: 0,
          colors: [
            "#409EFF",
            "#303133",
            "#ff0000",
            "#ff7f00",
            "#eeee11",
            "#67C23A",
            "#55cca3",
            "#409EFF",
            "#8b00ff",
          ],
          tabOptions: [
            {
              value: "aside.settings.tabs.tabOptions.default",
            },
            {
              value: "aside.settings.tabs.tabOptions.transform",
            },
            {
              value: "aside.settings.tabs.tabOptions.nimble",
            },
            {
              value: "aside.settings.tabs.tabOptions.tabcard",
            },
          ] as any[],
          tabClass: "aside.settings.tabs.tabOptions.nimble",
        },
      },
    };
  },
  getters: {
    settingsGetTabClass: (state) => {
      return state.aside.settings.tabClass.split(".").pop();
    },
    settingsGetSunnyMode: (state) => {
      return { value: state.aside.settings.isSunnyMode };
    },
  },
  actions: {
    initEvent() {
      window.innerWidth < 1200
        ? (this.aside.isCollapse = true)
        : (this.aside.isCollapse = false);
      window.innerWidth < 800
        ? (() => {
            if (!this.aside.Daside) {
              this.aside.Daside = true;
              this.aside.isDasideHide = true;
            }
          })()
        : (() => {
            this.aside.Daside = false;
            this.aside.isDasideHide = false;
            if (this.aside.settings.isSettingsHide) this.aside.isMask = false;
          })();
      //界面自适应事件
      window.addEventListener(
        "resize",
        _.throttle((e: any) => {
          window.innerWidth < 1200
            ? (this.aside.isCollapse = true)
            : (this.aside.isCollapse = false);
          window.innerWidth < 800
            ? (() => {
                if (!this.aside.Daside) {
                  this.aside.Daside = true;
                  this.aside.isDasideHide = true;
                }
              })()
            : (() => {
                this.aside.Daside = false;
                this.aside.isDasideHide = false;
                if (this.aside.settings.isSettingsHide)
                  this.aside.isMask = false;
              })();

          if (this.aside.settings.mode == 2) {
            this.aside.isEllipsis = 1;
            setTimeout(() => {
              this.aside.isEllipsis = 2;
            }, 1);
          }
          const Dheader = useDheader();
          //需要在变化后才能获取
          setTimeout(() => {
            Dheader.header.width = window.dom.id("Dheader").offsetWidth;
          }, 400);
        }, 800)
      );

      //保证样式不受刷新影响
      // () => {
      //   window.innerWidth < 1000
      //     ? (this.aside.isCollapse = true)
      //     : (this.aside.isCollapse = false);
      //   window.innerWidth < 600
      //     ? (() => {
      //         this.aside.Daside = true;
      //         this.aside.isDasideHide = true;
      //       })()
      //     : "";
      // };

      window.dom.id("mask")!.addEventListener("click", (event: any) => {
        var e = event || window.event;
        if (!this.aside.isCollapse && this.aside.Daside) {
          e.preventDefault();
          e.stopPropagation();
          this.aside.isCollapse = true;
          this.aside.isMask = false;
          this.aside.isDasideHide = true;
          return;
        }
      });
    },
    settingsSetThemeColor(index: number, color: string) {
      this.aside.settings.themeColor = index;
      document.body.style.setProperty("--theme-color", color);
      document.body.style.setProperty("--el-color-primary", color);
      // document.body.style.setProperty("--el-border-color", color);
      // document.body.style.setProperty("--el-tag-bg-color", color);
      // document.body.style.setProperty("--el-tag-border-color", color);
      // document.body.style.setProperty("--el-tag-text-color", color);
      // document.body.style.setProperty("--el-text-color-primary", color);
    },
    settingsDisplay() {
      this.aside.settings.isSettingsHide = true;
      this.aside.isMask = false;
    },
    settingsModeSwitch(id: number) {
      this.aside.settings.mode = id;
      setTimeout(() => {
        this.aside.isEllipsis = id;
      }, 1);
    },
  },
});
